import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Card, Space, Grid, Badge, Avatar } from 'antd-mobile';
import { AppOutline, UserOutline, SetOutline, MessageOutline } from 'antd-mobile-icons';
import { increment, decrement, reset } from '../../store/reducers/counterSlice';
import styles from './Home.module.less';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '欢迎使用React 18 H5应用！',
    };
  }

  handleIncrement = () => {
    this.props.dispatch(increment());
  };

  handleDecrement = () => {
    this.props.dispatch(decrement());
  };

  handleReset = () => {
    this.props.dispatch(reset());
  };

  render() {
    const { counter } = this.props;
    const { message } = this.state;

    const gridItems = [
      { icon: <AppOutline />, text: '应用', color: '#1677ff' },
      { icon: <UserOutline />, text: '用户', color: '#00b578' },
      { icon: <SetOutline />, text: '设置', color: '#ff8f1f' },
      { icon: <MessageOutline />, text: '消息', color: '#ff3141' },
    ];

    return (
      <div className={styles.container}>
        <div className={styles.content}>
          {/* 欢迎卡片 */}
          <Card className={styles.welcomeCard}>
            <div className={styles.welcomeContent}>
              <Avatar
                src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80"
                style={{ '--size': '60px' }}
              />
              <div className={styles.welcomeText}>
                <h3 className={styles.title}>欢迎回来！</h3>
                <p className={styles.subtitle}>{message}</p>
              </div>
            </div>
          </Card>

          {/* 功能网格 */}
          <Card className={styles.gridCard}>
            <h3 className={styles.cardTitle}>功能菜单</h3>
            <Grid columns={4} gap={16}>
              {gridItems.map((item, index) => (
                <Grid.Item key={index}>
                  <div className={styles.gridItem}>
                    <div 
                      className={styles.gridIcon}
                      style={{ color: item.color }}
                    >
                      {item.icon}
                    </div>
                    <div className={styles.gridText}>{item.text}</div>
                  </div>
                </Grid.Item>
              ))}
            </Grid>
          </Card>

          {/* 计数器示例 */}
          <Card className={styles.counterCard}>
            <h3 className={styles.cardTitle}>Redux 计数器示例</h3>
            <div className={styles.counterContent}>
              <div className={styles.counterValue}>
                当前值: <Badge content={counter.value} color="#1677ff" />
              </div>
              <Space className={styles.buttonGroup}>
                <Button 
                  color="primary" 
                  onClick={this.handleIncrement}
                  className={styles.button}
                >
                  +1
                </Button>
                <Button 
                  color="danger" 
                  onClick={this.handleDecrement}
                  className={styles.button}
                >
                  -1
                </Button>
                <Button 
                  color="default" 
                  onClick={this.handleReset}
                  className={styles.button}
                >
                  重置
                </Button>
              </Space>
            </div>
          </Card>

          {/* 技术栈信息 */}
          <Card className={styles.techCard}>
            <h3 className={styles.cardTitle}>技术栈</h3>
            <div className={styles.techList}>
              <div className={styles.techItem}>React 18</div>
              <div className={styles.techItem}>Redux Toolkit</div>
              <div className={styles.techItem}>React Router</div>
              <div className={styles.techItem}>Ant Design Mobile</div>
              <div className={styles.techItem}>CSS Modules + Less</div>
            </div>
          </Card>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter,
});

export default connect(mapStateToProps)(Home);
